.viewport {
  display: flex;
  flex-direction: column;
  margin: 0;
  height: 100%;
}

.mid-box {
  display: flex;
  width: 750rpx;
  height: 398rpx;
  background: #f2bb16;

  .newtite-box {
    display: flex;
    width: 750rpx;
    height: 398rpx;
    background: #fffaec;
    border-radius: 40rpx 40rpx 0rpx 0rpx;

    .img-box {
      position: absolute;
      display: flex;
      width: 270rpx;
      height: 180rpx;
      background: #ffffff;
      border-radius: 20rpx;
      box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
      top: 54rpx;
      right: 60rpx;
      font-size: 40rpx;
      font-family: PingFang SC, PingFang SC-500;
      font-weight: 500;
      text-align: center;
      color: #636161;
      line-height: 80rpx;
      align-items: center;
      justify-content: center;
    }

    .title-box1 {
      position: absolute;
      top: 80rpx;
      left: 44rpx;
      width: 258rpx;
      height: 42rpx;
    }

    .title-box2 {
      position: absolute;
      display: flex;
      width: 592rpx;
      height: 104rpx;
      top: 126rpx;
      left: 48rpx;
      justify-content: center;
      font-size: 72rpx;
      font-family: STZhongsong, STZhongsong-400;
      font-weight: 400;
      text-align: center;
      color: #000000;
      line-height: 84rpx;
      z-index: 999;
      white-space: nowrap;
    }

    .tit-min {
      position: absolute;
      top: 250rpx;
      left: 50rpx;
      width: 316rpx;
      height: 22rpx;
      font-size: 24rpx;
      font-family: PingFang SC,
        PingFang SC-500;
      font-weight: 500;
      text-align: CENTER;
      color: #333333;
      line-height: 28rpx;
    }
  }
}

.min-box {
  display: flex;
  position: sticky;
  top: 0;
  width: 750rpx;
  height: 90rpx;
  z-index: 999;

  .mi-box1 {
    position: absolute;
    justify-content: center;
    display: flex;
    width: 376rpx;
    height: 90rpx;
    // background: #f2bb16;
    background: #f8d770;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    font-size: 40rpx;
    font-family: PingFang SC, PingFang SC-500;
    font-weight: 500;
    text-align: center;
    // color: #070707;
    color: #ffffff;
    line-height: 80rpx;
    align-items: center;
  }

  .mi-box2 {
    display: flex;
    justify-content: center;
    margin-left: 320rpx;
    width: 432rpx;
    height: 90rpx;
    background: #f8d770;
    border-radius: 0rpx 40rpx 0rpx 0rpx;
    font-size: 40rpx;
    font-family: PingFang SC, PingFang SC-500;
    font-weight: 500;
    text-align: center;
    color: #ffffff;
    line-height: 80rpx;
    align-items: center;
    padding-left: 60rpx;
  }

  .mi-box1.active {
    background: #f2bb16;
    color: #070707;
  }

  .mi-box2.active {
    background: #f2bb16;
    color: #070707;
  }
}

.hot-spot {
  display: flex;
  margin: 0 64rpx;
  flex-wrap: wrap;
  flex-direction: column;

  .hot-header {
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #fff;
    padding-bottom: 20rpx;

    .left {
      flex-grow: 1;

      .hot-title {
        display: flex;
        margin-top: 0;
        width: 200rpx;
        height: 44rpx;
        font-size: 0.8533rem;
        font-family: STZhongsong, STZhongsong-400;
        font-weight: 400;
        color: #000000;
        line-height: 42rpx * 2;
        background-image: linear-gradient(0deg, #f8d770 50%, rgba(0, 0, 0, 0) 50%);
        font-size: 46rpx;
      }
    }

    .right {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-grow: 1;

      .circle {
        width: 212rpx;
        height: 104rpx;
        font-size: 48rpx;
        font-family: STZhongsong, STZhongsong-400;
        font-weight: 400;
        text-align: center;
        line-height: 104rpx;
        color: rgba(245, 209, 100, 0.61);
        background: linear-gradient(0deg, #fffaec 0%, #ffffff);
        border-radius: 50%;
        box-shadow: 6rpx -22rpx 56.8rpx 0rpx rgba(245, 209, 100, 0.28) inset,
          0rpx 8rpx 8rpx 0rpx rgba(155, 118, 9, 0.26), 0rpx -6rpx 8rpx 0rpx rgba(255, 255, 255, 0.38) inset;
        transform: translateY(10rpx);
      }
    }
  }

  .hot-box {
    .list-box {
      position: relative;
      overflow: visible;

      width: 582rpx;
      padding: 10rpx 0rpx;

      &::before {
        position: absolute;
        content: '';
        z-index: 9;
        width: 24rpx;
        height: 24rpx;
        margin: 6rpx 10rpx;
        border-radius: 50%;
        background-color: #000000;
      }

      &::after {
        position: absolute;
        content: '';
        width: 4rpx;
        height: 440rpx;
        top: 24rpx;
        left: 20rpx;
        bottom: -40rpx;
        background-color: #000000;
      }

      .time {
        margin: 0rpx 40rpx;
        height: 28rpx;
        font-size: 24rpx;
        font-family: PingFang SC, PingFang SC-500;
        color: #000000;
        line-height: 38rpx;

        .date {
          font-size: 32rpx;
          font-weight: 550;
        }
      }

      .info-box {
        width: 526rpx;
        height: 336rpx;
        margin: 20rpx 56rpx;
        font-family: PingFang SC, PingFang SC-500;
        color: #333333;
        font-weight: 550;
        font-size: 22rpx;
        background: #fffefe;
        border-radius: 20rpx;
        box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);

        .title {
          padding: 42rpx 0rpx 24rpx 50rpx;
          font-size: 32rpx;
          font-family: PingFang SC, PingFang SC-500;
          font-weight: 550;
          line-height: 38rpx;

          .platform {
            color: #f2bb16;
          }
        }

        .minor-title {
          margin: 0rpx 50rpx;
          line-height: 30rpx;
          letter-spacing: 0.08rpx;
        }

        .text {
          width: 428rpx;
          height: 60rpx;
          margin: 24rpx 0rpx 14rpx 50rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          letter-spacing: 0.08rpx;
          overflow-wrap: break-word;
          white-space: break-spaces;
          line-height: 30rpx;
        }

        .comment-box {
          display: flex;
          margin: 0rpx 50rpx;

          .comment-list {
            position: relative;
            display: flex;
            align-items: center;
            height: 34rpx;
            overflow: hidden;

            .user-img {
              position: absolute;
              width: 34rpx;
              height: 34rpx;
              border-radius: 50%;
              overflow: hidden;
              background-color: azure;
            }

            .comment {
              width: 184rpx;
              height: 28rpx;
              margin: 0rpx 14rpx;
              background: #f1f1f1;
              border-radius: 30rpx;
              font-size: 20rpx;
              font-family: PingFang SC, PingFang SC-500;
              font-weight: 500;
              text-align: CENTER;
              color: #333333;
              line-height: 24rpx;
            }
          }
        }

        .footer {
          display: flex;
          align-items: center;
          height: 26rpx;
          margin: 20rpx 0rpx 0rpx 50rpx;

          .num-box {
            display: flex;
            justify-content: space-between;

            .column {
              display: flex;
              align-items: center;
              margin: 0rpx 20rpx 0rpx 0rpx;

              .icon {
                margin: 0rpx 10rpx;
              }

              .data-text {
                height: 24rpx;
                font-size: 20rpx;
                font-family: PingFang SC, PingFang SC-500;
                font-weight: 500;
                text-align: CENTER;
                color: #cdcdcd;
                line-height: 24rpx;
              }
            }
          }

          .feature-box {
            display: flex;
            flex-grow: 1;
            align-items: center;
            justify-content: flex-end;
            margin: 0rpx 50rpx 0rpx 0rpx;

            .feature-text {
              font-size: 20rpx;
              font-family: PingFang SC, PingFang SC-500;
              font-weight: 500;
              text-align: CENTER;
              color: #f2bb16;
              line-height: 24rpx;
            }
          }
        }
      }
    }
  }


}

.loading-text {
  z-index: 999;
  text-align: center;
  justify-content: center;
  font-size: 28rpx;
  color: #666;
  padding: 80rpx 50rpx 50rpx 35%;
}

// 展开
.container {
  height: 100%;
  width: 100%;

  .souk {
    display: flex;
    margin-top: 40rpx;
    margin-left: 148rpx;
    flex-direction: row;
    align-items: center;
    width: 452rpx;
    height: 70rpx;
    background: #fffaec;
    border: 2rpx solid;
    border-image: linear-gradient(159deg, #fbfbfb 0%, #f5f5f5 100%) 1 1;
    border-radius: 20rpx;
    box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(0, 0, 0, 0.15);

    .sous {
      display: flex;
      margin-left: 10rpx;
      width: 282rpx;
      height: 50rpx;
      font-size: 30rpx;
      font-family: DengXian,
        DengXian-400;
      font-weight: 400;
      text-align: LEFT;
      color: rgba(0, 0, 0, 0.26);
      line-height: 28rpx;
    }
  }
}

// 第二个盒子
// .containers {
//   position: relative;
//   width: 750rpx;
// }
.he1 {
  width: 100%;
  // background: #79e4b0;

  .yinhangs {
    margin-top: 20rpx;
    margin-left: 60rpx;
    // background: #f2bb16;
    height: 60rpx;
    width: 300rpx;
    display: flex;
    align-items: center;
    font-size: 40rpx;
    color: #000;
    font-weight: 500;
  }

  .hangs {
    display: flex;
    flex-wrap: wrap;
    margin: 0 20rpx;
    // background: #c5da11;
    position: relative;
    transition: max-height 0.3s ease;
    overflow: hidden;
  }

  .hang-items {
    width: calc((100% - 30rpx) /4);
    /* 3个盒子，每个占1/3减去 margin */
    margin: 30rpx;
  }

  .hangss {
    width: 200rpx;
    height: 46rpx;
    background: #fff;
    border-radius: 10rpx;
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.25);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .zh-shs {
    width: 100%;
    height: 30rpx;
    font-size: 24rpx;
    text-align: center;
    color: #979797;
    cursor: pointer;
    // position: absolute;
    bottom: 0;
  }

  .arrows {
    margin-left: 10rpx;
  }
}

.he2 {
  width: 100%;
  // background: #09bcd3;
  height: 100%;

  .da-box {
    margin-top: 20rpx;
    margin-left: 60rpx;
    // background: #f2bb16;
    height: 60rpx;
    width: 200rpx;
    display: flex;
    align-items: center;
    font-size: 40rpx;
    color: #000;
    font-weight: 500;
  }

  .da-box1 {
    display: flex;
    flex-wrap: wrap;
    margin: 0 20rpx;
    // background: #c5da11;
    position: relative;
    transition: max-height 0.3s ease;
    overflow: hidden;
  }

  .da-box2 {
    width: calc((100% - 30rpx) /4);
    /* 3个盒子，每个占1/3减去 margin */
    margin: 30rpx;
  }

  .da-box3 {
    width: 200rpx;
    height: 46rpx;
    background: #fff;
    border-radius: 10rpx;
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.25);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .zh {
    width: 100%;
    height: 24rpx;
    color: #989696;
    font-size: 24rpx;
    text-align: center;
    line-height: 24rpx;
    cursor: pointer;
    bottom: 0;
  }

  .arr {
    margin-left: 10rpx;
  }


}

.he3 {
  margin-top: 0;
  width: 100%;
  // background: #ea76f3;
  height: 100%;

  .da-box {
    margin-top: 20rpx;
    margin-left: 60rpx;
    // background: #f2bb16;
    height: 60rpx;
    width: 300rpx;
    display: flex;
    align-items: center;
    font-size: 40rpx;
    color: #000;
    font-weight: 500;
  }

  .da-box1 {
    display: flex;
    flex-wrap: wrap;
    margin: 0 20rpx;
    // background: #c5da11;
    position: relative;
    transition: max-height 0.3s ease;
    overflow: hidden;
  }

  .da-box2 {
    width: calc((100% - 30rpx) /4);
    /* 3个盒子，每个占1/3减去 margin */
    margin: 30rpx;
  }

  .da-box3 {
    width: 200rpx;
    height: 46rpx;
    background: #fff;
    border-radius: 10rpx;
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.25);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .zh {
    width: 100%;
    height: 24rpx;
    color: #989696;
    font-size: 24rpx;
    text-align: center;
    line-height: 24rpx;
    cursor: pointer;
    bottom: 0;
  }

  .arr {
    margin-left: 10rpx;
  }
}

.hes {
  width: 100%;
  height: 30rpx;
  background: #c5c3c3;
}